<template>
    <div class="captcha-container">
        <img class="captcha" :src="captchaSrc" @click="refreshCaptcha" />
    </div>
</template>
<script>
import request from '@/utils/request.js';
export default {
    name: 'CaptchaComponent',
    data() {
        return {
            captchaSrc: '' // URL to fetch the captcha image
        };
    },
    methods: {
        refreshCaptcha() {
            // Reload the captcha image by changing the src attribute
            request.get('/captcha').then(response=>{
                console.log('Captcha fetched successfully:', response);
                this.captchaSrc = response.data.data
            }).catch(error=>{
                console.error('Error fetching captcha:', error);
            });
        }
    },
    mounted(){
        // This method is called when the component is launched
        console.log('CaptchaComponent onShow');
        this.refreshCaptcha();
    }
};
</script>

<style scoped>
.captcha {
    width: 200px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
}
.captcha:hover {
    border-color: #007bff;
}
.captcha:active {
    border-color: #0056b3;
}
.captcha:focus {
    outline: none;
}
</style>
